<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>我的班级</title>
  <link rel="icon" href="image/网页图标.png" type="image/x-icon">
  <script src="http://47.106.66.89:8080/js/vue.min.js"></script>
  <script src="http://47.106.66.89:8080/js/axios.min.js"></script>
  <link  href="http://47.106.66.89:8080/js/ele-2.15.7/theme-chalk/index.css" rel="stylesheet">
  <script src="http://47.106.66.89:8080/js/ele-2.15.7/index.js"></script>
  <script src="js/top.js"></script>
  <style>
    body {
      font-family: Arial, sans-serif;
      margin: 20px;
    }
    .container {
      max-width: 800px;
      margin: 0 auto;
    }
    h1 {
      text-align: center;
    }
    .class-list, .joined-classes {
      margin-top: 20px;
      padding: 10px;
      border: 1px solid #ccc;
      border-radius: 5px;
    }
    .class-list h2, .joined-classes h2 {
      margin-top: 0;
    }
    .class-item, .joined-class-item {
      margin: 5px 0;
      padding: 5px;
      background: #f9f9f9;
      border: 1px solid #ddd;
      border-radius: 3px;
    }
    .create-class-btn {
      display: block;
      width: 100%;
      max-width: 200px;
      margin: 20px auto;
      padding: 10px;
      background-color: #4CAF50;
      color: white;
      text-align: center;
      text-decoration: none;
      border: none;
      border-radius: 5px;
      cursor: pointer;
    }
    .create-class-btn:hover {
      background-color: #45a049;
    }
    *{
      padding: 0;
      margin: 0;
    }
    html, body, #app {
      width: 100%;
      height: 100%;
      font-size: 14px;
    }
    .el-container{
      width: 100%;
      height: 100%;
    }
    .el-header{
      width: 100%;
      padding: 0%;
    }

    /* 卡片 */
    .c1{
      width: 100%;
      height: 100%;
      font-size: 35px;
    }

    /* 弹出 */
    .d1{
      width: 200px;
      height: 400px;
      position: absolute;
      z-index: 100;
      left: 10%;
    }

    /* 浮动 */
    .f{
      float: left;
    }
    .r{
      float: right;
    }

    .i1{
      position: relative;
      top: -15px;
    }

    .p1{
      margin: 8px 10px 0 10px;
      text-decoration: none;
      color: #333333;
    }
    .user{
      float: right;
      position: relative;
      left: -40px;
      top: 15px;
    }
  </style>
</head>
<body>

<div id="app">
  <el-container>
    <!-- 头部 -->
    <el-header height="12%">
      <top @getuser="user">
      </top>
    </el-header>
    <!-- 身体 -->
    <el-main>
      <div class="container">
        <h1>我的班级</h1>
        <button class="r" style="width: 80px; height: 20px" @click="open2">班级记录</button>
        <button class="r" style="width: 80px; height: 20px" @click="location.href='setpaper.html'">自定义试卷</button>
        <button class="r" style="width: 80px; height: 20px" @click="location.href='mypaper.html'">我的试卷</button>
        <div class="class-list">
          <h2>我的班级</h2>
          <div class="class-item" v-for="c in myclass.c" @click="location.href='classinfo.html?id=' + c.id">{{c.cname}}</div>
        </div>

        <div class="joined-classes">
          <h2>加入的班级</h2>
          <div class="joined-class-item" v-for="i in myclass.i" @click="location.href='classinfo.html?id=' + i.id">{{i.cname}}</div>
        </div>

        <button class="create-class-btn f" @click="open1">加入班级</button>
        <button class="create-class-btn r" @click="open">创建班级</button>
      </div>
    </el-main>
  </el-container>

  <!--  创建班级-->
  <el-dialog title="创建班级" :visible.sync="showEditor">
    <el-form>
      <el-form-item label="班级名称" :label-width="100">
        <el-input v-model="className" style="width: 90%" placeholder="请输入内容"></el-input>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="showEditor = false">取 消</el-button>
      <el-button type="primary" @click="createClass">提 交</el-button>
    </div>
  </el-dialog>

  <!--  加入班级-->
  <el-dialog title="加入班级" :visible.sync="showEditor1">
    <el-form>
      <el-form-item label="邀请码" :label-width="100">
        <el-input v-model="code" style="width: 90%" placeholder="请输入内容"></el-input>
      </el-form-item>
      <el-form-item label="我的昵称" :label-width="100">
        <el-input v-model="sayname" style="width: 90%" placeholder="请输入内容"></el-input>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="showEditor1 = false">取 消</el-button>
      <el-button type="primary" @click="add">申 请</el-button>
    </div>
  </el-dialog>

  <!--  记录-->
  <el-dialog title="用户加入班级记录" :visible.sync="showEditor2" width="50%">
    <el-table :data="classRecords" style="width: 100%">
      <el-table-column prop="cname" label="班级名" width="180"></el-table-column>
      <el-table-column prop="status" label="状态" width="180">
        <template slot-scope="scope">
          <el-tag :type="getStatusType(scope.row.status)">
            {{ getStatusText(scope.row.status) }}
          </el-tag>
        </template>
      </el-table-column>
    </el-table>
    <div slot="footer" class="dialog-footer">
      <el-button @click="showEditor2 = false">取 消</el-button>
    </div>
  </el-dialog>
</div>

<script>
  let app = new Vue({
    el: '#app',
    data: {
      uid: null,
      showEditor: false,
      className: '',
      myclass: {
        c: {},
        i: {}
      },
      showEditor1: false,
      code: '',
      sayname: '',
      showEditor2: false,
      classRecords: [],
      ws: null
    },
    created() {
    },
    watch: {
      uid(newVal, oldVal) {
        if (newVal !== oldVal) {
          this.mycreate();
          this.myin();
          this.says();
        }
      }
    },
    methods: {
      //组件自定义方法
      user(info) {
        this.uid = info.id;
      },
      //查询我的班级信息
      mycreate(){
        axios.get("cloud-other/createclass/mycreate?id=" + this.uid).then(res=>{
          if(res.data.code === 1){
            this.myclass.c = res.data.data;
          }
        });
      },
      myin(){
        axios.get("cloud-other/classs/myin?id=" + this.uid).then(res=>{
          if(res.data.code === 1){
            this.myclass.i = res.data.data;
          }
        });
      },
      //打开弹窗
      open(){
        this.className = '';
        this.showEditor = true;
      },
      //打开弹窗
      open1(){
        this.code = '';
        this.sayname = '';
        this.showEditor1 = true;
      },
      //打开弹窗
      open2(){
        this.showEditor2 = true;
        //获取信息
        axios.get("cloud-other/classs/getRecord?id=" + this.uid).then(res=>{
          if(res.data.code === 1){
            this.classRecords = res.data.data;
          }
        });
      },
      //创建班级
      createClass(){
        if(this.className === ''){
          this.$alert("请输入班级名称!");
          return;
        }
        //开始创建班级
        axios.get("cloud-other/createclass/createClass?id=" + this.uid + "&name=" + this.className).then(res=>{
          if(res.data.code === 1){
            this.$message(res.data.msg);
            this.mycreate();
            this.showEditor = false;
          }else{
            this.$alert(res.data.msg);
          }
        });
      },
      add(){
        if(this.code === ''){
          this.$alert("请输入班级邀请码!");
          return;
        }
        if(this.sayname === ''){
          this.$alert("请输入昵称!");
          return;
        }
        //开始加入班级
        axios.get("cloud-other/createclass/add?id=" + this.uid + "&code=" + this.code + "&sayname=" + this.sayname).then(res=>{
          if(res.data.code === 1){
            this.$message(res.data.msg);
            this.ws.send(this.code);
            this.showEditor1 = false;
          }else{
            this.$alert(res.data.msg);
          }
        });
      },
      getStatusType(status) {
        switch (status) {
          case 1:
            return 'success';
          case 0:
            return 'warning';
          case -1:
            return 'danger';
          case 2:
            return 'info';
        }
      },
      getStatusText(status) {
        switch (status) {
          case 0:
            return '审核中';
          case 1:
            return '通过';
          case 2:
            return '创建班级';
          case -1:
            return '未通过';
          default:
            return '';
        }
      },
      //创建连接
      says(){
        this.ws = new WebSocket("ws://127.0.0.1:8003/classs/" + this.uid + "/" + "0" +  "/" + "0");
        this.ws.onopen = ()=>{
          console.info("服务器连接成功！");
        }
        this.ws.onclose = ()=>{
          console.info("服务器断开连接！");
        }
        this.ws.onmessage = (data)=>{
          let json = data.data;
          let msgInfo = JSON.parse(json);
          //判断是不是修改查询
          if(msgInfo === "刷新"){
            this.mycreate();
            this.myin();
          }
          }
        }
      },
  });
</script>
</body>
</html>